<template>
	<view class="container">
		<view class="app-tabbar">
			<view class="tabbar-item" @click="goIndex('home', 1)">
				<view class="icon icon-home" :class="{'active': isIndex == 1}"></view>
				<text class="" :style="{color: isIndex==1?'#0DD4BB':'#3C547F'}">{{i18n.tabBar.index}}</text>
			</view>
			<view class="tabbar-item" @click="goIndex('invitate', 2)">
				<view class="icon icon-invitate" :class="{'active': isIndex == 2}"></view>
				<text class="" :style="{color:isIndex==2?'#0DD4BB':'#3C547F'}">{{i18n.tabBar.invite}}</text>
			</view>
			<view class="tabbar-item" @click="goIndex('team', 3)">
				<view class="icon icon-team" :class="{'active': isIndex == 3}"></view>
				<text class="" :style="{color:isIndex==3?'#0DD4BB':'#3C547F'}">{{i18n.tabBar.team}}</text>
			</view>
			<view class="tabbar-item" @click="goIndex('user', 4)">
				<view class="icon icon-user" :class="{'active': isIndex == 4}"></view>
				<text class="" :style="{color:isIndex==4?'#0DD4BB':'#3C547F'}">{{i18n.tabBar.user}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
			}
		},
		computed:{
			i18n() {
				return this.$t('message');
			},
		},
		props: {
			isInner: { //是否内页
				type: Boolean,
				default: false
			},
			isIndex: { //是否主页
				type: Number,
				default: 0
			}
		},
		methods: {
			goIndex(i){
				switch (i) {
					case 'home':
						if(this.isIndex == 1 && !this.isInner){
							
						}else{
							uni.switchTab({
								url: '/pages/index/index',
							})
						}
						break;
					case 'invitate':
						if(this.isIndex == 2 && !this.isInner){
							
						}else{
							uni.switchTab({
								url: '/pages/invitation/invitation'
							})
						}
						break;
					case 'team':
						if(this.isIndex == 3 && !this.isInner){
							
						}else{
							uni.switchTab({
								url: '/pages/team/team'
							})
						}
						break;
					case 'user':
						if(this.isIndex == 4 && !this.isInner){
							
						}else{
							uni.switchTab({
								url: '/pages/user/user'
							})
						}
						break;
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.app-tabbar {
		width: 100%;
		height: 110rpx;
		padding: 18rpx 80rpx 14rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		background: #202A33;
		box-shadow: 0px -2px 2px rgba(0,0,0,0.2);
		
		.tabbar-item {
			//这里有一处坑，若不不设置他的层级变大的话
			//你是点不到这个item按钮的，当然也不会产生触碰事件
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 24rpx;
			color: #b1b1b1;
			
			text{
				transform: scale(0.92);
			}
		}
		
		.icon{
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 8rpx;
			background-color: #fff;
			
			&.icon-home{
				background: url('../static/images/tab-bar-home.png') no-repeat;
				background-size: 100% 100%;
			}
			&.icon-invitate{
				background: url('../static/images/tab-bar-invite.png') no-repeat;
				background-size: 100% 100%;
			}
			&.icon-team{
				background: url('../static/images/tab-bar-team.png') no-repeat;
				background-size: 100% 100%;
			}
			&.icon-user{
				background: url('../static/images/tab-bar-user.png') no-repeat;
				background-size: 100% 100%;
			}
			
			&.active.icon-home{
				background: url('../static/images/tab-bar-home-l.png') no-repeat;
				background-size: 100% 100%;
			}
			&.active.icon-invitate{
				background: url('../static/images/tab-bar-invite-l.png') no-repeat;
				background-size: 100% 100%;
			}
			&.active.icon-team{
				background: url('../static/images/tab-bar-team-l.png') no-repeat;
				background-size: 100% 100%;
			}
			&.active.icon-user{
				background: url('../static/images/tab-bar-user-l.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}

</style>
